<!-- 
	* 摘要：装箱记录
	* 软件名称：雪克码数据管理系统1.0
	* 文件名: packingRecoders.vue
	* 版本：1.0
 -->
<template>
	<div class="sn-common-container">
		<div class="prcoss-container">
			<header>
				<div class="sn-flex sn-row-center hidden-sm-and-down">
					<el-select v-model="searchShop"  placeholder="选择店铺"  filterable style="width: 160px;margin-right: 10px;"  @change="shopChangeFn()">
						<el-option v-for="item in shopList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
					<el-select
						@change="currentChange(1)"
						v-model="fillterSaleman"
						collapse-tags
						filterable
						placeholder="选择装箱人筛选"
						clearable
						style="width: 200px; margin: 0 10px 0 0px"
					>
					<el-option  :label="'未配置'" style="border-bottom:1px solid #eaeaea" :value="'00000000-0000-0000-0000-000000000000'" />
						<el-option v-for="item in salemanList" :key="item.userId" :label="item.realName" :value="item.userId" />
					</el-select>
					<el-select
						v-model="searchItem"
						filterable
						remote
						clearable
						reserve-keyword
						style="margin-right: 10px;"
						placeholder="请输入商品名称搜索"
						@change="currentChange(1)"
						:remote-method="remoteMethod"
						:loading="loading">
						<el-option
						v-for="item in itemList"
						:key="item.id"
						:label="item.name"
						:value="item.id">
						</el-option>
					</el-select>
					<el-date-picker v-model="BeginTime" type="datetime" style="margin-right: 10px; width: 150px;" placeholder="开始时间"  @change="currentChange(1)"></el-date-picker>
					<el-date-picker v-model="EndTime" type="datetime" placeholder="结束时间" style="width: 150px;"  @change="currentChange(1)"></el-date-picker>
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" icon="el-icon-search"
						@click="currentChange(1)">
						搜索
					</el-button>
				</div>
				<div class="hidden-sm-and-up">
					<el-input v-model="searchValue" placeholder="输入商品名称进行筛选" style="width: 200px" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-button style="margin-left: 4px" type="primary" class="sn-btn" icon="el-icon-search"
						@click="currentChange(1)">
						搜索
					</el-button>
				</div>
			</header>
			<section> 
				<global-table :loading="tableLoading" style="margin-top: 20px;" :pageIndex="currentPage" :pageSize="pageSize" :headerData="initData"
					:data="tabelData" :isFullScreen="false" :operateW="200">
					<template #userCount="scope">
						<span>{{ scope.row.userCount }}</span> <br  />
						<span>{{ scope.row.userNames }}</span>
					</template>
					<template #itemCount="scope">
						<span>{{ scope.row.itemCount }}</span> <br  />
						<span class="sn-hover" @click="openDetailsFn(scope.row.id,2)" style="color:#409EFF;"> 查看商品</span>
					</template>
					<template #createdTime="scope">
						<span>{{ $parseTime(scope.row.createdTime) }}</span>
					</template>
					<template #operate="scope">
						<el-button type="primary" size="mini" @click="openDetailsFn(scope.row.id,1)">查询</el-button>
					</template>
				</global-table>
			</section>
			<footer style="margin-top: 10px;">
				<el-pagination @current-change="currentChange" :current-page.sync="currentPage" :page-size="pageSize"
					layout="prev, pager, next, jumper" :pager-count="7" class="sn-pagination" hide-on-single-page
					style="text-align: center;" :total="totalNum" background>
					>
				</el-pagination>
			</footer>
		</div>
		 <!-- 订单详情 -->
		 <el-dialog :visible.sync="tradeDialog" append-to-body class="sn-default-dialog" width="660px" @close="tradeDialogClose()">
			<div class="sn-title" slot="title">记录详情</div>
			<el-radio v-model="viewRecordType" :label="1"  @input="getItemsByTrade()">按装箱人</el-radio>
			<el-radio v-model="viewRecordType" :label="2"  @input="getItemsByTrade()" >按商品</el-radio>
			<div v-loading="tradeDetailsLoading" >
				<global-table :showNumber="false" v-if="viewRecordType ==1" :showOperate="false" :loading="itemTableLoading" style="margin-top: 20px;" :headerData="userInitData"
					:data="userTableData" :isFullScreen="false" :operateW="280">
				</global-table>
				<global-table :showNumber="false" v-if="viewRecordType ==2" :showOperate="false" :loading="itemTableLoading" style="margin-top: 20px;" :headerData="itemInitData"
					:data="itemTabelData" :isFullScreen="false" :operateW="280">
					
				</global-table>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import GlobalTable from '@/components/GlobalTable';
import {GetPackingRecordsPageMng,GetPackingUsers,GetPackingItems} from '@/api/bottleCode';
import { GetItemsPage} from '@/api/itemList';
import {  GetEnterprisesByPage,GetEmployeeByPage} from '@/api/enterprise';
import { guid } from '@/utils'
export default {
	components: { GlobalTable },
	data() {
		return {
			tableLoading:false,
			tabelData: [],
			orderStatus:'',
			itemTypeText:['实物商品','卡密兑换','充值兑换','客调兑换'],
			fillterSaleman:'',
			salemanList:[],
			initData: [
			{
					label: '企业名称',
					value: 'enterpriseName',
					id: guid(),
					width: 180,
				},
				{
					label: '装箱日期',
					value: 'inDate',
					id: guid(),
					width: 120,
				},
				{
					label: '装箱人',
					value: 'userCount',
					id: guid(),
					width: 200,
					isCustom:true
				},
				{
					label: '商品种类',
					value: 'itemCount',
					id: guid(),
					width:150,
					isCustom:true
				},
				
				{
					label: '箱数',
					value: 'boxCount',
					id: guid(),
					width: 100,
				},
			],
			viewRecordType:1,
			itemTableLoading:false,
			itemTabelData:[],
			itemInitData:[
				{
					label: '商品名称',
					value: 'name',
					id: guid(),
					width: 200,
				},
				{
					label: '商品图片',
					value: 'imageUrl',
					id: guid(),
					type:'img',
					width: 100,
					imgStyle:{
						width: '50px',
						height: '50px',
					}
				},
				{
					label: '商品规格',
					value: 'specification',
					id: guid(),
					width: 120,
				},
				{
					label: '装箱人数',
					value: 'userCount',
					id: guid(),
					width: 100,
				},
				{
					label: '装箱数量',
					value: 'boxCount',
					id: guid(),
					width: 100,
				},
			],
			userTableData:[],
			userInitData:[
				{
					label: '装箱人',
					value: 'name',
					id: guid(),
					width: 100,
				},
				{
					label: '商品种类',
					value: 'itemCount',
					id: guid(),
					width: 100,
				},
				{
					label: '装箱数量',
					value: 'boxCount',
					id: guid(),
					width: 100,
				},
			],
			currentPage: 1,
			pageSize: 10,
			totalNum: 0,
			searchValue: '',
			BeginTime:'',
			EndTime:'',
			tradeDetailsLoading:false,
			tradeDialog:false,
			tradeDetailsInfo:{},
			shopList:[],
			searchShop:'',
			chooseRocordId:"",
			searchItem:'',
			itemList:[],
			loading:false,
		}
	},
	created() {
		this.getShopListFn();
		this.getDataListFn();
	},
	methods: {
		shopChangeFn(){
			this.searchValue = '';
			this.getSalemanListFn();
			this.currentChange(1);
		},
		async remoteMethod(query) {
			if (query !== '') {
				this.loading = true;
				const res = await GetItemsPage({
					Name:query,
					pageSize:999,
					pageIndex:1
				});
				this.loading = false;
				if(res.code === 200){
					this.itemList = res.data.list;
				}else{
					this.itemList = [];
				}
			} else {
				this.itemList = [];
			}
		},
		async getShopListFn() {
			this.tableLoading = true;
			let params = {
				pageIndex: 1,
				pageSize: 999,
			}
			try {
				const res = await GetEnterprisesByPage(params);
				this.tableLoading = false;
				if (res.code === 200) {
					this.shopList = res.data.list;
					this.searchShop = res.data.list[2].id;
					this.getSalemanListFn();
				} else {
					this.shopList = [];
					this.$message.error('获取店铺列表失败，错误信息：' + res.erroMessage);
				}
			} catch (error) {
				this.tableLoading = false;
			}
		},
			// 获取筛选的业务员列表
		async getSalemanListFn(){
			let params = {
				pageIndex: 1,
				pageSize: 999,
				EnterpriseId: this.searchShop,
			}
			let res = await GetEmployeeByPage(params);
			if(res.code === 200){
				this.salemanList = res.data.list;
			}else{
				this.$message.error('获取员工列表失败，错误信息：'+res.erroMessage)
			}
		},
		// 关闭详情弹窗
		tradeDialogClose(){
			this.tradeDetailsInfo = {};
		},
		// 打开订单详情弹窗
		async openDetailsFn(id,type){
			this.viewRecordType = type;
			this.tradeDialog = true;
			this.chooseRocordId = id;
			this.getItemsByTrade(id);
		},
		async getItemsByTrade(){
			this.itemTableLoading = true;
			let params = {
				PackingRecordId: this.chooseRocordId,
			}
			if(this.viewRecordType === 2){
				const res = await GetPackingItems(params);
				this.itemTableLoading = false;
				if(res.code === 200){
					this.itemTabelData = res.data;
				}else{
					this.itemTabelData = [];
					this.$message.error('获取商品列表失败,错误信息：'+res.erroMessage);
				}
			}else{
				const res = await GetPackingUsers(params)
			    this.itemTableLoading = false;
				if(res.code === 200){
					this.userTableData = res.data;
				}else{
					this.userTableData = [];
					this.$message.error('获取装箱人列表失败,错误信息：'+res.erroMessage);
				}
			}
		},
		currentChange(val) {
			this.currentPage = val;
			this.getDataListFn();
		},
		// 获取装箱记录列表
		async getDataListFn() {
			this.tableLoading = true;
			try {
				let params = {
					pageIndex: this.currentPage,
					pageSize: this.pageSize,
					EnterpriseId:this.searchShop,
				}
				if(this.BeginTime) params.StartTime = this.BeginTime;
				if(this.EndTime) params.EndTime = this.EndTime;
				if(this.fillterSaleman !==''){
					params.UserId = this.fillterSaleman;
				}
				if(this.searchItem !==''){
					params.ItemId = this.searchItem;
				}
				
				const res = await GetPackingRecordsPageMng(params);
				this.tableLoading = false;
				if (res.code === 200) {
					this.tabelData = res.data.list;
					this.totalNum = res.data.totalCount;
				} else {
					this.tabelData = [];
					this.$message.error('获取订单列表失败，错误信息：' + res.erroMessage);
				}
			} catch (error) {
				this.tableLoading = false;
				this.$message.error('请求订单列表失败，错误信息：' + error);
			}
			
		},
	}
};
</script>
  
<style lang="scss" scoped>
.prcoss-container {
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
}
</style>